﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情</title>
    <script src="~/lib/vue/vue.global.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        .container {
            width: 95%;
            margin: 20px auto;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .header {
            font-size: 20px;
            font-weight: bold;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .info-section {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
        }

            .info-table td {
                padding: 8px 0;
                vertical-align: top;
            }

        .info-label {
            width: 100px;
            color: #333;
        }

        .info-value {
            color: #666;
        }

        .operation-log {
            display: flex;
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #ebeef5;
            flex-wrap: wrap;
            gap: 20px;
        }

        .log-item {
            white-space: nowrap;
        }

        /* 状态区域：靠右对齐 */
        .status-area {
            position: absolute;
            top: 120px; /* 调整垂直位置 */
            right: 40px; /* 调整水平位置 */
        }

        .status-label {
            color: #999;
            font-size: 14px;
            text-align: right;
            margin-bottom: 4px;
        }

        .status-value {
            font-weight: bold;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="container" style="position: relative;">
        <!-- 新增相对定位，作为状态区域的基准 -->
        <!-- 加载状态 -->
        <el-loading v-loading="loading" element-loading-text="加载中...">
            <!-- 头部标题和按钮容器 -->
            <div class="header-container">
                <div class="header">
                    {{ form.customer_name || '客户详情' }} {{ form.customer_code || '' }}
                </div>
                <div class="btn-group">
                    <el-button v-on:click="goBack">返回列表</el-button>
                    <el-button type="primary" v-on:click="goToEdit">编辑</el-button>
                    <el-button>删除</el-button>
                    <el-button>停用</el-button>
                    <el-button>打印</el-button>
                </div>
            </div>

            <!-- 状态区域 -->
            <div class="status-area">
                <div class="status-label">状态</div>
                <div class="status-value">{{ form.status === '1' ? '启用' : '停用' }}</div>
            </div>

            <!-- 基础信息区域 -->
            <div class="info-section">
                <table class="info-table">
                    <tr>
                        <td class="info-label">所属行业</td>
                        <td class="info-value">{{ form.industry_name || '无' }}</td>
                        <td class="info-label">客户来源</td>
                        <td class="info-value">{{ form.customer_source_name || '无' }}</td>
                        <td class="info-label">联系人</td>
                        <td class="info-value">{{ form.contact_person || '无' }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">联系电话</td>
                        <td class="info-value">{{ form.contact_phone_number || '无' }}</td>
                        <td class="info-label">电子邮箱</td>
                        <td class="info-value">{{ form.email_address || '无' }}</td>
                        <td class="info-label">销售部门</td>
                        <td class="info-value">{{ form.sales_dept_name || '无' }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">销售负责人</td>
                        <td class="info-value">{{ form.sales_person_name || '无' }}</td>
                        <td colspan="4"></td> <!-- 空单元格占列 -->
                    </tr>
                    <tr>
                        <td class="info-label">客户地址</td>
                        <td colspan="5" class="info-value">{{ form.customers_address || '无' }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">备注</td>
                        <td colspan="5" class="info-value">{{ form.note || '无' }}</td>
                    </tr>
                </table>

                <!-- 操作日志区域 -->
                <div class="operation-log">
                    <div class="log-item">
                        <span>创建人：{{ form.create_by || '未知' }}</span>
                    </div>
                    <div class="log-item">
                        <span>创建时间：{{ formatDate(form.create_time) || '无' }}</span>
                    </div>
                    <div class="log-item">
                        <span>更新人：{{ form.update_by || '无更新' }}</span>
                    </div>
                    <div class="log-item">
                        <span>更新时间：{{ formatDate(form.update_time) || '无' }}</span>
                    </div>
                </div>
            </div>

            <!-- 财务信息区域 -->
            <div class="info-section">
                <table class="info-table">
                    <tr>
                        <td class="info-label">账户名称</td>
                        <td class="info-value">{{ form.account_name || '无' }}</td>
                        <td class="info-label">纳税人识别号</td>
                        <td class="info-value">{{ form.taxid || '无' }}</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="info-label">银行账户</td>
                        <td class="info-value">{{ form.bank_account || '无' }}</td>
                        <td class="info-label">开户银行</td>
                        <td class="info-value">{{ form.opening_bank || '无' }}</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="info-label">开户行地址</td>
                        <td colspan="5" class="info-value">{{ form.bkaddr || '无' }}</td>
                    </tr>
                </table>
            </div>

            <!-- 附件信息区域 -->
            <div class="info-section">
                <div class="section-title">附件信息</div>
                <el-upload action=""
                           :file-list.sync="fileList"
                           :on-success=""
                           :before-upload=""
                           :limit="3">
                </el-upload>
            </div>
        </el-loading>
    </div>

    <script>
        const { createApp, ref,reactive, onMounted } = Vue;
        const app = createApp({
            setup() {
                // 状态管理
                const form = ref({});
                const loading = ref(true);
                const customerCode = ref('');

                const  fileList=ref('');

                // 从URL获取客户编码
                const getUrlParams = () => {
                    const params = new URLSearchParams(window.location.search);
                    customerCode.value = params.get('customerCode') || '';
                };

                // 日期格式化
                const formatDate = (dateString) => {
                    if (!dateString) return '';
                    const date = new Date(dateString);
                    return date.toLocaleString();
                };

                // 查询客户详情
                const fetchCustomerDetail = async () => {
                    if (!customerCode.value) {
                        ElementPlus.ElMessage.warning('客户编码不存在');
                        loading.value = false;
                        return;
                    }

                    try {
                        loading.value = true;
                        const response = await axios.get('/CustomerManagement/GetCustomerDetail', {
                            params: { customerCode: customerCode.value }
                        });

                        if (response.data.success) {
                            form.value = response.data.data || {};
                            if(response.data.data.annex_code){
                                await loadAttachments(response.data.data.annex_code);
                            }
                        } else {
                            ElementPlus.ElMessage.error(response.data.message || '获取详情失败');
                        }
                    } catch (error) {
                        console.error('查询详情失败：', error);
                        ElementPlus.ElMessage.error('网络错误，获取详情失败');
                    } finally {
                        loading.value = false;
                    }
                };


                 // 加载附件列表（新增函数）
                const loadAttachments = async (annexCode) => {
                    try {
                        // 调用后端接口：根据annex_code查询附件
                        const res = await axios.get(`/api/Supplier/GetAttachments?annexCode=${annexCode}`);
                        if (res.data.success) {
                            // 格式化数据为el-upload所需的fileList结构
                            fileList.value = res.data.data.map(file => ({
                                name: file.fileName, // 文件名
                                url: file.fileUrl,   // 文件访问路径（需后端返回可访问的URL）
                                uid: file.id         // 附件唯一标识
                            }));
                        } else {
                            ElementPlus.ElMessage.error(res.data.message);
                        }
                    } catch (error) {
                        console.error('加载附件失败：', error);
                        ElementPlus.ElMessage.error('加载附件失败，请重试');
                    }
                };

                // 页面跳转
                const goBack = () => {
                    window.location.href = '/CustomerManagement/Index';
                };

                const goToEdit = () => {
                    window.location.href = `/CustomerManagement/Edit?customerCode=${customerCode.value}`;
                };

                // 初始化
                onMounted(() => {
                    getUrlParams();
                    fetchCustomerDetail();
                });

                return {
                    form,
                    loading,
                    goBack,
                    goToEdit,
                    formatDate,
                    fileList,
                };
            }
        });

        app.use(ElementPlus);
        app.mount('.container');
    </script>
</body>
</html>